<template>
    <t-dialog v-model:visible="visible" :on-confirm="onConfirm" :closeBtn="false" header="项目新增">
        <t-form ref="form" :data="formData" :rules="rules" @reset="onReset" @submit="onSubmit" label-width="2px">
            <t-form-item  help="项目名称不能为空" name="name">
                <t-input v-model="formData.name" placeholder="项目名称"></t-input>
            </t-form-item>

            <t-form-item  help="项目的基本介绍" name="description">
                <t-textarea v-model="formData.description" placeholder="项目描述"></t-textarea>
            </t-form-item>
   
        </t-form>
    </t-dialog>
</template>
<script setup>
import {reactive, ref} from 'vue';
import { addProject } from '@/api/api';

const formData = reactive({
    name:'',
    description:''
})
const form = ref()
const visible = ref(false);
const checkName = () => {
    if(formData.name===''){
        return { result: false, message: '名称不能为空', type: 'error' }
    }
    return { result: true, type: 'success' }
}

const rules = {
  name: [
  { validator: checkName, },
]

};

const onSubmit = ({ validateResult, firstError, e }) => {
  e.preventDefault();
  if (validateResult === true) {
    let data = {
        name:formData.name,
        desc:formData.description,
    }
    addProject(data).then(res=>{
        if(res.code===200){
            visible.value = false
        }
    })
  } 
};


const onReset = () => {
    form.value.reset();
};


 


 const onConfirm = () => {
    visible.value = false;
    form.value.submit();
 }

const open = () =>{
    form.value.reset();
    visible.value = true
}


defineExpose({
    open,
})

</script>